<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="common.css">

</head>
<body>
    <!-- .keys>(.key[data-key=""])>div+span.sound)*9 -->
    <div class="keys">
        <div class="key" data-key="65">
            <div>A</div>
            <span class="sound">clap</span>
        </div>
        <div class="key" data-key="83">
            <div>S</div>
            <span class="sound">hihat</span>
        </div>
        <div class="key" data-key="68">
            <div>D</div>
            <span class="sound">kick</span>
        </div>
        <div class="key" data-key="70">
            <div>F</div>
            <span class="sound">openhat</span>
        </div>
        <div class="key" data-key="71">
            <div>G</div>
            <span class="sound">boom</span>
        </div>
        <div class="key" data-key="72">
            <div>H</div>
            <span class="sound">ride</span>
        </div>
        <div class="key" data-key="74">
            <div>J</div>
            <span class="sound">snare</span>
        </div>
        <div class="key" data-key="75">
            <div>K</div>
            <span class="sound">tom</span>
        </div>
        <div class="key" data-key="76">
            <div>L</div>
            <span class="sound">tink</span>
        </div>
    </div>
    <audio data-key="71"  src=" sounds/boom.wav" autoplay ></audio>
    <audio id="clap" data-key="65" src="sounds/clap.wav" autoplay ></audio>
    <audio data-key="83" src=" sounds/hihat.wav" autoplay ></audio>
    <audio  data-key="68" src=" sounds/kick.wav" autoplay ></audio>
    <audio data-key="70" src=" sounds/openhat.wav" autoplay></audio>
    <audio data-key="72" src=" sounds/ride.wav" autoplay ></audio>
    <audio data-key="74" src=" sounds/snare.wav" autoplay ></audio>
    <audio data-key="76" src=" sounds/tink.wav" autoplay ></audio>
    <audio data-key="75" src=" sounds/tom.wav" autoplay></audio>
    <script src="./common.js"></script>
</body>
</html>